<script setup>
import { userId } from '@/stores/user'
import { deleteFriend } from '@/stores/friend';
import { middlePage, rightPage, friendAndGroupInfoDrawer} from '@/stores/page';
import { useGetFriendStore } from '@/stores/getFriend'

const getFriendStore = useGetFriendStore()

const props = defineProps({
    friendId: Number,
    friendName: String,
    friendGender: String,
    friendBirthday: String,
    friendPhone: String
})

function deleteF() {
    middlePage.value = 1;
    rightPage.value = 0;
    friendAndGroupInfoDrawer.value = false;
    deleteFriend(userId.value,props.friendId)
    getFriendStore.getFriendList()
}

</script>

<template>

    <el-card class="card" shadow="always">昵称: {{ friendName }}</el-card>
    <el-card class="card" shadow="always">ID: {{ friendId }}</el-card>
    <el-card class="card" shadow="always">性别: {{ friendGender }}</el-card>
    <el-card class="card" shadow="always">生日: {{ friendBirthday }}</el-card>
    <el-card class="card" shadow="always">电话号码: {{ friendPhone }}</el-card>
    <el-button v-if="friendId !== userId" type="danger" @click="deleteF()">删除好友</el-button>
</template>

<style scoped>
.card {
    display: flex;
    justify-content: left;
    align-items: left;
    margin-bottom: 10px;
    font-size: 20px;
}

button {
    font-size: 20px;
    width: 15vw;
    height: 8vh;
    margin-top:10%;
}
</style>